<template>
    <div>
        <headbar title="搜索" :left="true" classleft="el-icon-back" @handleleft="toback"></headbar>
        <van-search 
        placeholder="请输入搜索关键词" 
        v-model="value" 
        show-action
        @cancel="oncancel"
        @input="onmove"/>
        <div class="mar">
            <div v-for="(item,index) in atteactionlist" :key="index" class="out" @click="tomore(item)">
                <img :src="item.picture[0]" class="picture" />
                <div class="text">
                    <div class="title">{{ item.name }}</div>
                    <div class="story">{{ item.story }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import headbar from '@/components/headbar.vue'
import axios from 'axios'
export default {
    components:{headbar},
    mounted(){
        axios('http://localhost:3000/attractions').then(res=>{
            this.allList = res.data
        })
    },
    data(){
        return{
            value:'',
            allList:[],
            atteactionlist:[]
        }
    },
    methods:{
        onmove(){
            this.atteactionlist = this.allList.filter((item)=>{
                return item.name.includes(this.value)
            })
            console.log(this.atteactionlist)
        },
        oncancel(){
            this.value = ''
        },
        tomore(item){
            this.$store.commit('giveToMore',item)
            this.$router.push(`/more`)
        },
        toback(){
            this.$router.back()
        }
    }
}
</script>
<style lang="scss" scoped>
.picture{
    width: 1.25rem;
    height: 1.5rem;
    margin-right: 10px;
}
.out{
    width: 100%;
    height: 1.5rem;
    display: flex;
    margin: 10px 0px;
    background-color: white;
}
.text{
    width: 2.2rem;
    height: 1.5rem;
}
.title{
    height:0.32rem;
    font-size: 20px;
    margin-bottom: 10px;
    width: 100%;
}
.story{
    color: rgb(124, 127, 126);
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 1.18rem;
    width: 100%;
}
</style>